<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<title>京东商城-教学测试</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/base.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/index/index.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/index/toolbar.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/index/banner.css" />
<script src="<%=basePath%>js/jquery-1.8.3.js" type="text/javascript"
	charset="utf-8"></script>
<script src="<%=basePath%>js/index.js" type="text/javascript"
	charset="utf-8"></script>
<script src="<%=basePath%>js/index_toolbar.js" type="text/javascript"
	charset="utf-8"></script>
<script src="<%=basePath%>js/slider.js" type="text/javascript"
	charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/common/footer.css" />
</head>

<body>
	<!--最外层容器-->
	<div id="mod_container">
		<!--活动广告-->
		<div class="joy_top">
			<div class="joy_top_link">
				<div class="mark_top">
					<a href="#"><img src="img/index/618.png" /></a>
				</div>
				<div class="joy_top_img">
					<a href="#"><img src="img/index/joy_top.jpg" /> </a>
				</div>
				<i class="joytop_close icon iconfont icon-guanbi"></i>
				<ul class="joytop_list">
					<li class="joytop_item"><a href="#"><img
							src="img/index/pinpairi.png" /></a></li>
					<li class="joytop_item"><a href="#"><img
							src="img/index/dapaikuanghuan.png" /></a></li>
				</ul>
			</div>
		</div>
		<!--顶部登录条与logo-->
		<div id="shortcut" class="clearfix">
			<!--登录条-->
			<div class="w">
				<!--城市列表-->
				<ul class="fl">
					<li class="city_m"><i
						class="icon iconfont icon-coordinates_fill"></i> 天津</li>
				</ul>
				<!--登录等其他链接-->
				<ul class="fr">
					<li class="first"><a class="red" href="#">请登录</a> <a href="#">免费注册</a>
					</li>
					<li class="spacer"></li>
					<li><a href="#">我的订单</a></li>
					<li class="spacer"></li>
					<li><a href="#">我的京东</a></li>
					<li class="spacer"></li>
					<li><a href="#">京东会员</a></li>
					<li class="spacer"></li>
					<li><a href="#">企业采购</a></li>
					<li class="spacer"></li>
					<li><a href="#">客户服务</a></li>
					<li class="spacer"></li>
					<li><a href="#">网站导航</a></li>
					<li class="spacer"></li>
					<li><a href="#">手机京东</a></li>
				</ul>
			</div>

		</div>
		<div id="header">
			<!--logo和搜索框-->
			<div class="w">
				<!--logo做绝对对齐-->
				<div class="logo">
					<img src="img/index/jd_logo.gif" />
				</div>
				<!--搜索框-->
				<div class="search">
					<div class="search_m">
						<div class="form">
							<div class="form_panel">
								<input type="text" class="search_txt" placeholder="关键字" value="" />
								<span class="photo-search-btn"> <span class="upload_bg">

								</span>
								</span>
								<button class="search_button" type="button">
									<i class="icon iconfont icon-search"></i>
								</button>
							</div>
						</div>
					</div>
					<!--购物车-->
					<div id="settleup" class="">
						<!--cw-icon参照物-->
						<div class="cw-icon">
							<i class="icon iconfont icon-caigou-xianxing"></i> <a href="#">我的购物车</a>
							<div class="dropdown-layer">
								<img src="img/index/empty_cart.png" />购物车中还没有商品，赶紧选购吧！
							</div>
							<span class="i-count"> 1 </span>
							<div class="cw_space"></div>
						</div>
					</div>
					<!--热搜关键字-->
					<div id="hotwords">
						<a class="style_red" href="#">家电疯狂点</a> <a href="#">京东超市</a> <a
							href="#">时令生鲜</a> <a href="#">每150-50</a> <a href="#">立减千元</a> <a
							href="#">品牌盛行</a> <a href="#">满减立省</a> <a href="#">可减800</a> <a
							href="#">车友福利</a>
					</div>
					<!--横向标题菜单-->
					<!--<div id="navitems">
							11111
						</div>-->
				</div>
				<div class="w_bottom">
					<div id="navitems">
						<ul class="navitems-group1">
							<li><a href="#">秒杀</a></li>
							<li><a href="#">优惠券</a></li>
							<li><a href="#">PLUS会员</a></li>
							<li><a href="#">闪购</a></li>
							<li><a href="#">拍卖</a></li>
							<li><a href="#">京东服饰</a></li>
							<li><a href="#">京东超市</a></li>
							<li><a href="#">生鲜</a></li>
							<li><a href="#">全球购</a></li>
							<li><a href="#">京东金融</a></li>
						</ul>

					</div>
				</div>
			</div>
		</div>
		<!--导航栏所在行-->
		<div id="fs">
			<div class="fs_grid clearfix">
				<div class="fs_col1">
					<!--菜单栏-->
					<div id="j_cate" class="j_cate">
						<!--一级分类-->
						<ul class="cate_menu">
							<c:forEach var="listring" items="${list }" varStatus="cl">
								${listring }
							</c:forEach>
						</ul>

						<div class="menu_items_panel" style="display: block;">
							<!--显示弹出内容外层容器-->
							<c:set var="i" value="1"></c:set>
							<c:forEach var="catemainitem" items="${catelist }">
								<c:if test="${catemainitem.up_id==0}">
									<div id="cate_item<c:out value='${i}'></c:out>"
										class="cate_item clearfix">
										<div class="cate_part_col1">
											<!--左侧子菜单-->
											<!--频道-->
											<div class="cate_channel">
												<a href="#" class="cate_channel_lk"
													clstag="h|keycount|head|category_01b01" target="_blank">家电馆
													&gt;</a> <a href="#" class="cate_channel_lk"
													clstag="h|keycount|head|category_01b01" target="_blank">家电馆
													&gt;</a> <a href="#" class="cate_channel_lk"
													clstag="h|keycount|head|category_01b01" target="_blank">家电馆
													&gt;</a> <a href="#" class="cate_channel_lk"
													clstag="h|keycount|head|category_01b01" target="_blank">家电馆
													&gt;</a>
											</div>
											<!--分类菜单-->
											<div class="cate_detail">
												<c:forEach var="item" items="${catelist }">
													<c:if test="${item.up_id==catemainitem.category_id }">
														<dl class="cate_detail_item cate_detail_item1">
															<dt class="cate_detail_tit">
																<a href="${item.category_url }">${item.category_name
																	}</a>
															</dt>
															<dd class="cate_detail_con">
																<c:forEach var="third_item" items="${catelist }">
																	<c:if test="${third_item.up_id==item.category_id }">
																		<a href="${third_item.category_url }"
																			class="cate_detail_con_lk" target="_blank">${third_item.category_name
																			}</a>
																	</c:if>

																</c:forEach>
															</dd>
														</dl>
													</c:if>

												</c:forEach>
											</div>
										</div>
										<div class="cate_part_col2">
											<!--右侧子菜单-->
											<div class="cate_brand">
												<a class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a> <a
													class="cate_brand_lnk" href="#"><img
													src="img/index/zhongliang.png" /></a>
											</div>
											<div class="cate_promotion">
												<a href="#"><img src="img/index/jingdongjiaju.png" /></a> <a
													href="#"><img src="img/index/jingdongjiaju.png" /></a>
											</div>
										</div>
									</div>
									<c:set var="i" value="${i+1 }"></c:set>
								</c:if>
							</c:forEach>
						</div>
					</div>
				</div>
				<div class="fs_col2">
					<!-- 轮播广告 -->
					<div id="jd_focus" class="flexslider">
						<ul class="slides">
							<li><a title="" target="_blank" href="#"> <img
									width="1920" height="470" alt=""
									style="background: url(img/index/list1.png) no-repeat center;">
							</a></li>
							<li><a title="" href="#"> <img width="1920" height="470"
									alt=""
									style="background: url(img/index/list2.png) no-repeat center;">
							</a></li>
							<li><a title="" href="#"> <img width="1920" height="470"
									alt=""
									style="background: url(img/index/list3.png) no-repeat center;">
							</a></li>
							<li><a title="" href="#"> <img width="1920" height="470"
									alt=""
									style="background: url(img/index/list4.png) no-repeat center;">
							</a></li>
						</ul>
						<ul class="flex-direction-nav">
							<li><a class="flex-prev" href="javascript:;">Previous</a></li>
							<li><a class="flex-next" href="javascript:;">Next</a></li>
						</ul>
						<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
							<li><a>1</a></li>
							<li><a>2</a></li>
							<li><a>3</a></li>
							<li><a>4</a></li>
						</ol>
					</div>
					<script type="text/javascript">
						$(function() {
							var bannerSlider = new Slider($('#jd_focus'), {
								time : 5000,
								delay : 400,
								event : 'hover',
								auto : true,
								mode : 'fade',
								controller : $('#bannerCtrl'),
								activeControllerCls : 'active'
							});
							$('#jd_focus .flex-prev').click(function() {
								bannerSlider.prev();
							});
							$('#jd_focus .flex-next').click(function() {
								bannerSlider.next();
							});
						})
					</script>
				</div>
				<div class="fs_col3">
					<div class="rec_item">
						<a href="#"><img src="img/index/lab01.png" /></a>
					</div>
					<div class="rec_item">
						<a href="#"><img src="img/index/lab02.png" /></a>
					</div>
					<div class="rec_item">
						<a href="#"><img src="img/index/lab03.png" /></a>
					</div>
				</div>
				<div class="fs_col4">
					<div class="user">
						<div class="user_inner">
							<div class="J_user_avatar">
								<a class="user_avatar_lk" href="#"> <img
									src="img/index/no_login.jpg" />
								</a>
							</div>
							<div class="user_show">
								<div>
									<p class="user_tip">Hi~欢迎来到京东！</p>
									<p>
										<a href="#">登录</a> <a href="#">注册</a>
									</p>
								</div>
							</div>
							<div class="user_profit">
								<a class="user_pro_lk" href="#">新人福利</a> <a
									class="user_pro_plus" href="#">PLUS会员</a>
							</div>
						</div>
					</div>
					<div class="j_news news">
						<div class="J_news_tab">
							<!--标题列表-->
							<div class="J_tab_head">
								<a class="news_first mod_tab_head_item_on" href="#">促销</a> <a
									class="news_last" href="#">公告</a>
								<!--切换红色横向div-->
								<div class="J_news_tab_active"></div>
								<a class="news_more" href="#">更多</a>
							</div>
							<!--切换div-->
							<div class="J_tab_content">
								<div class="j_tab_first_content j_tab_content_item">
									<ul class="news_list">
										<li><a href="#">巅峰24小时，爆品5折抢！</a></li>
										<li><a href="#">巅峰24小时，爆品5折抢！</a></li>
										<li><a href="#">巅峰24小时，爆品5折抢！</a></li>
										<li><a href="#">巅峰24小时，爆品5折抢！</a></li>
									</ul>
								</div>
								<div class="j_tab_last_content j_tab_content_item">
									<ul class="news_list">
										<li><a href="#">公告列表</a></li>
										<li><a href="#">公告列表</a></li>
										<li><a href="#">公告列表</a></li>
										<li><a href="#">公告列表</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="j_service service">
						<!--切换四个服务-->
						<div class="service_entry_list">
							<!--列表标题-->
							<div class="J_service_head">
								<a class="J_service_head_title J_service_head_title_on"
									data-index="1" href="#">话费</a> <a class="J_service_head_title"
									data-index="2" href="#">机票</a> <a class="J_service_head_title"
									data-index="3" href="#">酒店</a> <a class="J_service_head_title"
									data-index="4" href="#">游戏</a>
							</div>
							<i class="icon iconfont icon-guanbi"></i>
							<!--切换div-->
							<div class="J_service_content">
								<div id="jsc1"
									class="J_service_huafei J_service_content_item J_service_content_item_on">
									1</div>
								<div id="jsc2" class="J_service_jipiao J_service_content_item">
									2</div>
								<div id="jsc3" class="J_service_jiudian J_service_content_item">
									3</div>
								<div id="jsc4" class="J_service_youxi J_service_content_item">
									4</div>
							</div>
						</div>
						<!--12个服务图标-->
						<div class="service_entry">
							<ul class="service_list">
								<li class="service_item service_item_on"><a href="#"> <i
										class="service_icon icon iconfont icon-huafei"></i> <span
										class="service_txt">话费</span>
								</a></li>
								<li class="service_item service_item_on"><a href="#"> <i
										class="service_icon icon iconfont icon-feiji-"></i> <span
										class="service_txt">机票</span>
								</a></li>
								<li class="service_item service_item_on"><a href="#"> <i
										class="service_icon icon iconfont icon-jiudian"></i> <span
										class="service_txt">酒店</span>
								</a></li>
								<li class="service_item service_item_on"><a href="#"> <i
										class="service_icon icon iconfont icon-icon--"></i> <span
										class="service_txt">游戏</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-jingwuicon_svg_huaban"></i>
										<span class="service_txt">企业购</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-jiayouchongzhi"></i> <span
										class="service_txt">加油卡</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-shexiangji"></i> <span
										class="service_txt">电影票</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-huochepiao"></i> <span
										class="service_txt">火车票</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-woyaozhongchou"></i> <span
										class="service_txt">众筹</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-licai"></i> <span
										class="service_txt">理财</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-card"></i> <span
										class="service_txt">礼品卡</span>
								</a></li>
								<li class="service_item"><a href="#"> <i
										class="service_icon icon iconfont icon-chanpintiaokuan"></i> <span
										class="service_txt">白条</span>
								</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="fs_bg">
				<a href="#"></a>
			</div>
		</div>

		<div style="height: 500px;"></div>

		<!--侧边活动工具条-->
		<!--工具栏最外层容器-->
		<div id="J-global-toolbar">
			<!--工具中间层，应用fixed属性进行视窗定位-->
			<div class="jdm-toolbar-wrap">
				<!--内层容器，包含弹出工具区域和工具按钮 定位是relative-->
				<div class="jdm-toolbar-container">
					<div class="jdm-toolbar-panel ">
						<div class="jdm-toolbar-panels">
							<h3 class="jdm-toolbar-panel-header">京东618全球年中购物节</h3>
							<div class="nygHead">
								<a href="#"> <img src="img/index/fixed/fixed_top_img.png" />
								</a>
							</div>
						</div>
					</div>
					<div class="jdm-toolbar-buttons">
						<!--618按钮-->
						<div class="jdm-tbar-act"></div>
						<!--侧边按钮列表-->
						<div class="jdm-tbar-list">
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-renbudaiwaiquan"></i> <em
									class="tab-text">京东会员</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-icon-test"></i> <em
									class="tab-text">购物车</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-ban"></i> <em
									class="tab-text">我的关注</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-daodashijian"></i> <em
									class="tab-text">我的足迹</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-xiaoxi"></i> <em
									class="tab-text">我的消息</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-service"></i> <em
									class="tab-text">资讯客服</em>
							</div>
						</div>
						<div class="jdm-tbar-recover"></div>
						<!--底部按钮-->
						<div class="jdm-tbar-bottom">
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-huidingbu"></i> <em
									class="tab-text">顶部</em>
							</div>
							<div class="jdm-tbar-item">
								<i class="tbar_icon icon iconfont icon-fankuiyijian"></i> <em
									class="tab-text">反馈</em>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	    <!--引用底部模板页面-->
		<jsp:include page="template/index_footer.jsp"></jsp:include>
	</div>
</body>

</html>
